<template>
	<div class="madp-dialog-content">
		<el-select
			:value="value"
			:multiple="multiple"
			placeholder="请选择部门"
			@remove-tag="removeTag"
			:clearable="clearable"
			@clear="clearHandle"
		>
			<el-option :value="value">
				<el-tree
					id="tree-option"
					ref="selectTree"
					:accordion="true"
					:data="departmentData"
					:props="defaultProps"
					:default-checked-keys="defaultCheckedVal"
					show-checkbox
					:expand-on-click-node="false"
					:node-key="defaultProps.value"
					:check-strictly="true"
					@check="handleNodeClick"
					@check-change="handleCheckChange"
				></el-tree>
			</el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: 'select-department',
	data() {
		return {
			value: [],
			arr: [],
			defaultCheckedVal: [],
		}
	},
	props: {
		/*配置选项*/
		defaultProps: {
			type: Object,
			default: () => {
				return {
					value: 'id', // ID字段名
					label: 'label', // 显示名称
					children: 'children', // 子级字段名
				}
			},
		},
		/*展示数据*/
		departmentData: {
			type: Array,
			default: () => {
				return []
			},
		},
		/* 可清空选项 */
		clearable: {
			type: Boolean,
			default: () => {
				return true
			},
		},
		/*多选初始值*/
		defaultMultipleValue: {
			type: Array,
			default: () => {
				return []
			},
		},
		/*是否多选*/
		multiple: {
			type: Boolean,
			default: () => {
				return true
			},
		},
		timeSlotIndex: 0,
	},
	mounted() {
		//多选
		this.init()
	},
	methods: {
		//初始化多选默认值，如果有传递默认值，则回显默认值
		init() {
			//如果有传默认值过来，则渲染到组件中
			if (this.defaultMultipleValue.length > 0) {
				this.defaultCheckedVal = this.defaultMultipleValue.map(
					(item) => item.value
				)
				this.value = this.defaultMultipleValue.map((item) => item.label)
			}
		},
		// 切换选项
		handleNodeClick(node, el) {
			this.selectedNodes = el.checkedNodes
			//多选
			let departmentSelect = []
			this.value = el.checkedNodes.map((item) => {
				let departmentObj = {
					label: item[this.defaultProps.label],
					value: item[this.defaultProps.value],
				}
				departmentSelect.push(departmentObj)
				return item[this.defaultProps.label]
			})
			this.$emit('changeSelectVal', {
				timeSlotIndex: this.timeSlotIndex,
				departmentSelect,
			})
		},
		//移除选项
		removeTag(tag) {
			let arr = this.selectedNodes.filter(
				(item) => item[this.defaultProps.label] === tag
			)
			this.$refs.selectTree.setChecked(arr[0].id, false)
			this.value.splice(this.value.indexOf(tag), 1)
		},
		// 清除选中项
		clearHandle() {
			this.value = []
			this.$refs.selectTree.setCheckedKeys([])
		},
		//获取选中id值
		getCheckedKeys() {
			return this.$refs.selectTree.getCheckedKeys()
		},
		handleCheckChange(data, checked) {},
	},
}
</script>

<style lang="scss" scoped>
.madp-dialog-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	padding: 0;
	overflow: hidden;
	overflow-y: auto;
}

.el-select-dropdown__item.selected {
	font-weight: normal;
}

ul li >>> .el-tree .el-tree-node__content {
	height: auto;
	padding: 0 20px;
}

.el-tree-node__label {
	font-weight: normal;
}

.el-tree >>> .is-current .el-tree-node__label {
	color: #409eff;
	font-weight: 700;
}

.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
	color: #606266;
	font-weight: normal;
}
/deep/.el-select {
	width: 100% !important;
}
</style>
